<template>
  <div class="in-wrap">
    <header id="header">
      <section class="container">
        <h1 id="logo">
          <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2398150799,87219350&fm=26&gp=0.jpg" width="100%" height="100%" >
        </h1>
        <div class="h-r-nsl">
          <ul class="nav">
            <router-link to="/dashboard/index" tag="li" active-class="current" exact>
              <a>首页</a>
            </router-link>
            <router-link to="/dashboard/list" tag="li" active-class="current">
              <a>视频</a>
            </router-link>
            <router-link to="/qa" tag="li" active-class="current">
              <a>问答</a>
            </router-link>
          </ul>
          <!-- / nav -->
          <aside class="h-r-search">
            <form action="#" method="post">
              <label class="h-r-s-box">
                <input type="text" placeholder="搜索视频" name="queryCourse.courseName" value>
                <button type="submit" class="s-btn">
                  <em class="icon18">&nbsp;</em>
                </button>
              </label>
            </form>
          </aside>
        </div>
        <aside class="mw-nav-btn">
          <div class="mw-nav-icon"></div>
        </aside>
        <div class="clear"></div>
      </section>
    </header>
    <el-main>
      <el-row type="flex"  justify="center" >
        <h2><p style="font-size: x-large;color: #00baf2">用户信息修改页面</p></h2>
      </el-row>
      <el-row type="flex" justify="center" >
        <el-col :span="12" >
          <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="name">
              <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile"  :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator: checkPhone, trigger: 'blur'}]">
              <el-input v-model="ruleForm.mobile"></el-input>
            </el-form-item>
            <el-form-item label="修改头像" prop="avatar">
            <el-upload
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              action="http://localhost:8888/oss/fileoss"
              class="avatar-uploader">
              <img :src="ruleForm.avatar" width="150px" height="100px">
            </el-upload>
            </el-form-item>

            <el-form-item label="个性签名" prop="desc">
              <el-input type="textarea" v-model="ruleForm.sign"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

    </el-main>
  </div>
</template>

<script>
  import '../assets/css/reset.css'
  import '../assets/css/theme.css'
  import '../assets/css/global.css'
  import '../assets/css/web.css'
  import '../assets/css/base.css'
  import '../assets/css/activity_tab.css'
  import '../assets/css/bottom_rec.css'
  import '../assets/css/nice_select.css'
  import '../assets/css/order.css'
  import '../assets/css/swiper-3.3.1.min.css'
  import "../assets/css/pages-weixinpay.css"

  import cookie from 'js-cookie'
  import video from "../api/video";
    export default {
      data() {
        return {
          userId:'',
          ruleForm: {
            username:'',
            mobile:'',
            avatar:'',
          },
        };
      },
      created() {
         if(this.$route.params&&this.$route.params.id){
           this.userId=this.$route.params.id
         }
        this.getUserInfo()
        },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              //修改用户
              video.updateUserInfo(this.userId,this.ruleForm).then(res=>{
                video.getUserInfo(this.userId).then(res=>{
                  this.ruleForm=res.data.data.member
                  cookie.set('userInfo',this.ruleForm,{domain: 'localhost'})
                })
                this.$message.success('修改用户成功');
              })
              this.$router.push({path:'/dashboard/'})
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        handleAvatarSuccess(res, file) {
          this.ruleForm.avatar = res.data.url
        },
        getUserInfo(){
          video.getUserInfo(this.userId).then(res=>{
            this.ruleForm=res.data.data.member
          })
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        //核对手机号
        checkPhone (rule, value, callback) {
          //debugger
          if (!(/^1[34578]\d{9}$/.test(value))) {
            return callback(new Error('手机号码格式不正确'))
          }
          return callback()
        }
      }

    }
</script>

<style scoped>
  .el-main {
    width: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    color: #333;
    text-align: left;
    line-height: 160px;
    margin-left: 20%;
  }
</style>
